<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="commons/head::myhead(~{::title},~{::link})">
    <title>userlist</title>
    <!-- main CSS -->
    <link href="asserts/css/main.css" th:href="@{/asserts/css/main.css}" rel="stylesheet">
</head>
<body>
    <!--引入topbar-->
    <div th:replace="commons/bar::topbar"></div>
    <div class="container-fluid">
        <div class="row">
            <!--引入sidebar-->
            <div th:replace="commons/bar::#sidebar(activeUri='userlist')"></div>
            <main role="main" class="col-md-10 ml-sm-auto col-lg-10 pt-3 px-4">
                <h2><a class="btn btn-sm btn-success" href="user/add.html" th:href="@{/main/user}">[[#{btn.add.user}]]</a></h2>
                <div class="table-responsive">
                    <table class="table table-striped table-sm">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>[[#{user.name}]]</th>
                                <th>[[#{common.password}]]</th>
                                <th>[[#{common.email}]]</th>
                                <th>[[#{common.phone.number}]]</th>
                                <th>[[#{user.authority}]]</th>
                                <th>[[#{common.note}]]</th>
                                <th>[[#{common.operation}]]</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr th:each="user:${users}">
                                <td th:text="${user.id}"></td>
                                <td th:text="${user.username}"></td>
                                <td th:text="${user.password}"></td>
                                <td th:text="${user.email}"></td>
                                <td th:text="${user.phoneNumber}"></td>
                                <td th:text="${user.authority}"></td>
                                <td th:text="${user.note}"></td>
                                <td>
                                    <a class="btn btn-sm btn-primary" href="user/add.html" th:href="@{/main/user/}+${user.id}" th:text="#{btn.edit}">Edit</a>
                                    <button class="btn btn-sm btn-danger deleteBtn" th:attr="del_uri=@{/main/user/}+${user.id}"  th:text="#{btn.delete}">Delete</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </main>
            <form id="deleteUserForm" method="POST">
                <input type="hidden" name="_method" value="DELETE"/>
            </form>
        </div>
    </div>

    <div th:replace="commons/head::myscript(~{::script})">
        <script type="text/javascript">
            $(".deleteBtn").click(function(){
                // 删除制定id的员工
                $("#deleteUserForm").attr("action",$(this).attr("del_uri")).submit();
                return false;
            })
        </script>
    </div>
</body>
</html>